<template>
  <div class="tab-container">
    <el-form ref="form" :model="fromitem" label-width="120px" @submit.prevent="onSubmit">
      <el-form-item v-for="(item1,index1) in groups" :key="index1" :label="item1.title">
        <!-- input 输入框 -->
        <el-input v-if="item1.type==='string'" v-model="fromitem[item1.name]" :name="item1.name" :placeholder="item1.tip" />
        <!-- select -->
        <el-select v-if="item1.type==='select'" v-model="fromitem[item1.name]" placeholder="请选择">
          <el-option
            v-for="(item,sele) in item1.extend"
            :key="sele"
            :label="item"
            :value="sele"
          />
        </el-select>
        <!-- textarea -->
        <el-input v-if="item1.type==='text'" v-model="fromitem[item1.name]" type="textarea" :name="item1.name" :placeholder="item1.tip" />
        <!-- radio -->
        <el-radio-group v-if="item1.type==='radio'" v-model="fromitem[item1.name]">
          <el-radio
            v-for="(item,sele) in item1.extend"
            :key="sele"
            :label="sele"
            :value="sele"
          >{{ item }}</el-radio>
        </el-radio-group>
        <!-- checkbox -->
        <el-checkbox-group v-if="item1.type==='checkbox'" v-model="fromitem[item1.name]">
          <el-checkbox
            v-for="(item,sele) in item1.extend"
            :key="sele"
            :label="item"
            :value="sele"
          />
        </el-checkbox-group>
        <div v-if="item1.type==='array'">
          <addItem v-model="fromitem[item1.name]" />
        </div>
        <div v-if="item1.type==='keyword'">
          <keywords v-model="fromitem[item1.name]" />
        </div>
        <div v-if="item1.type==='image'">
          <uploadImg v-model="fromitem[item1.name]" />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import addItem from '@/components/FormItems/addItem'
import uploadImg from '@/components/Upload/uploadImg'
import keywords from '@/components/FormItems/keywords'
import { saveConfig } from '@/api/general'
import { notifySuccess } from '@/utils/message'
export default {
  components: { addItem, keywords, uploadImg },
  props: {
    groups: { default: function() {
      return {}
    }, type: Array },
    fromitem: { default: function() {
      return {}
    }, type: Object }
  },
  data() {
    return {
    }
  }, methods: {
    onSubmit() {
      saveConfig(this.fromitem).then(res => {
        notifySuccess(res.message || '提交成功')
      })
    }
  }
}
</script>

<style scoped>
.tab-container {
  max-width: 800px;
}
</style>
